<template>
  <el-select v-model="selectValue" @change="afterChange" :placeholder="placeholder" :automaticDropdown="automaticDropdown" :size="size" :disabled="disabled" :clearable="clearable" :filterable="filterable" :allowCreate="allowCreate" :loading="loading" :multiple="multiple" :multipleLimit="multipleLimit" :popper-append-to-body="false" >
    <el-option v-for="item in optionsData" :key="item[optionKey]" :label="item[optionLabel]" :value="item[optionValue]">
    </el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      optionsData: [],

      optionsMap: {},
      selectValue: ''
    }
  },
  created() {
    var _this = this

    if (this.autoLoad) {
      this.loadData()
    }

    if (this.value) {
      this.selectValue = this.value
    }
  },

  watch: {
    value: function(val, old) {
      if (val) {
        this.selectValue = val
      } else {
        this.selectValue = ''
      }
    },

    'data': function(val, old) {
      this.optionsData = val
      //this.selectValue = ''
    },
    'optionsData': function(val, old) {

      if (!this.cacheLabel) {
        return
      }

      this.optionsMap = {}
      if (val && val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          this.optionsMap[val[i][this.optionValue]] = val[i][this.optionLabel]
        }
      }
    },

    'url': function(val, old){
      this.selectValue = ''
      this.loadData()
    }
    
  },

  destroyed() {

  },
  computed: {

  },
  updated() {

  },

  methods: {


    loadData() {
      var _this = this

      if (this.data && this.data.length > 0) {
        this.optionsData = this.data
        return
      }

      if (!_this.url || _this.url == '') {
        return
      }
      this.$ajax({
        url: _this.url,
        method: 'post',
        data: {

        },
        success: function(responseData) {
          if (responseData.data && responseData.data.rows) _this.optionsData = responseData.data.rows
        }
      })
    },

    afterChange(val) {
      this.$emit('input', val)
    },

    getlabels() {

      if (this.multiple) {
        if (this.selectValue && this.selectValue.length > 0) {
          let arr = []
          for (let i = 0; i < this.selectValue.length; i++) {
            arr.push(this.optionsMap[this.selectValue[i]])
          }
          return arr
        } else {
          return []
        }
      } else {
        if (this.selectValue && this.selectValue != '') {
          return this.optionsMap[this.selectValue]
        } else {
          return ''
        }
      }


    }
    ///

  },
  props: {

    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    cacheLabel: {
      type: Boolean,
      default: false
    },

    // style: {
    //   type: String,
    //   default: ''
    // },

    optionKey: '',
    optionLabel: '',
    optionValue: '',
    autoLoad: {
      type: Boolean,
      default: true
    },
    url: '',

    name: String,
    id: String,
    value: {
      required: true
    },
    autocomplete: {
      type: String,
      default: 'off'
    },

    automaticDropdown: Boolean,
    size: String,
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    allowCreate: Boolean,
    loading: Boolean,
    popperClass: String,
    remote: Boolean,
    loadingText: String,
    noMatchText: String,
    noDataText: String,
    remoteMethod: Function,
    filterMethod: Function,
    multiple: Boolean,
    multipleLimit: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String
    },
    defaultFirstOption: Boolean,
    reserveKeyword: Boolean,
    valueKey: {
      type: String,
      default: 'value'
    },
    collapseTags: Boolean,
    popperAppendToBody: {
      type: Boolean,
      default: true
    }



  }
}

</script>
